<!-- 股票列表 -->
<template>
    <div class="pageListBox">
        <div class="cardAdmin">
            <div class="formNewAdmin" v-if="formshow">
                <div class="formSearch">
                    <span class="namename">用户名</span>
                    <el-input size="mini" style="flex: 3" v-model="form.username"></el-input>
                </div>
                <div class="souSuoYouCe">
                    <el-button icon="el-icon-refresh" size="mini" class="white-button" @click="resetForm()">重置</el-button>
                    <el-button class="black-button" icon="el-icon-search" size="mini"
                        @click="get_data('btn')">搜索</el-button>
                </div>
            </div>
        </div>
        <div class="btnBoxList">
            <div class="btns">
                <el-button class="green-button" size="mini" icon="el-icon-plus" plain @click="addbtn()">Add</el-button>
                <el-button class="black-button" size="mini" icon="el-icon-refresh" plain
                    @click="get_data()">刷新表格</el-button>
            </div>
            <div class="formbtns">
                <div style="max-width: 200px;height: 100%;;background-color: #f4f4f4;display: flex;">
                    <div class="qweqweasdasd">
                        <el-dropdown trigger="click" placement="bottom">

                            <div class="btnList22">
                                <i class="el-icon-s-grid"></i>
                                <i style="font-size: 14px;" class="el-icon-caret-bottom"></i>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item v-for="col in allColumns" :key="col.prop">
                                    <el-checkbox v-model="selectedColumns" :label="col.prop">
                                        {{ col.label }}
                                    </el-checkbox>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div class="poipoi1">
                        <el-dropdown @command="exportTable" class="popo1cli" trigger="click" placement="bottom">
                            <span class="el-dropdown-link">
                                <i style="font-size: 18px;" class="el-icon-download"></i>
                                <i style="font-size: 14px;" class="el-icon-caret-bottom"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="json">JSON</el-dropdown-item>
                                <el-dropdown-item command="xml">XML</el-dropdown-item>
                                <el-dropdown-item command="csv">CSV</el-dropdown-item>
                                <el-dropdown-item command="txt">TXT</el-dropdown-item>
                                <el-dropdown-item command="word">Word</el-dropdown-item>
                                <el-dropdown-item command="excel">Excel</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div class="poipoi2">
                        <i style="font-size: 18px;cursor: pointer;" class=" el-icon-search" @click="showform"></i>

                    </div>
                </div>
            </div>
        </div>
        <!-- 表格 -->
        <el-table v-table-resize  border  highlight-current-row :data="tableData" height="600px" cell-class-name="rowlist" class="x1919"
            ref="tableRef" size="mini" v-loading="table_loading">

            <el-table-column prop="id" fixed="left"  label="id" width="auto" align="center" min-width="80px">
            </el-table-column>

            <el-table-column type="expand" label="其他参数" width="80px">
                <template slot-scope="scope">
                    <el-descriptions size="mini" border title="其他参数" :column="1"
                        style="padding-left: 30px;max-width: 1000px;">
                        <el-descriptions-item label="行业分类ID">{{ scope.row.category_id }}</el-descriptions-item>
                        <el-descriptions-item label="行业分类名称">{{ scope.row.category_name }}</el-descriptions-item>
                        <el-descriptions-item label="所属国家ID">{{ scope.row.country_id }}</el-descriptions-item>
                        <el-descriptions-item label="是否显示">{{ scope.row.display_status }}</el-descriptions-item>
                        <el-descriptions-item label="是否有股息">{{ scope.row.dividend_status }}</el-descriptions-item>
                        <el-descriptions-item label="是否推荐">{{ scope.row.is_recommended }}</el-descriptions-item>
                        <el-descriptions-item label="公司LOGO地址">{{ scope.row.logo }}</el-descriptions-item>
                        <el-descriptions-item label="更新时间">{{ scope.row.updated_at }}</el-descriptions-item>
                        <el-descriptions-item label="权重">{{ scope.row.weight }}</el-descriptions-item>
                    </el-descriptions>
                </template>
            </el-table-column>
            <el-table-column prop="beta" label="Beta系数" width="auto" align="center" min-width="100px">
            </el-table-column>
            <el-table-column prop="symbol" label="股票代码" width="auto" align="center" min-width="100px">
            </el-table-column>
            <el-table-column prop="open_price" label="今日开盘价" width="auto" align="center" min-width="100px">
            </el-table-column>

            <el-table-column prop="name" label="股票名称" width="auto" align="center" min-width="150px">
            </el-table-column>
            <el-table-column prop="market_cap" label="市值" width="auto" align="center" min-width="100px">
            </el-table-column>
            <el-table-column prop="high_price" label="最高价" width="auto" align="center" min-width="100px">
            </el-table-column>
            <el-table-column prop="low_price" label="最低价" width="auto" align="center" min-width="100px">
            </el-table-column>
            <el-table-column prop="price" label="当前价" width="auto" align="center" min-width="100px">
            </el-table-column>
            <el-table-column prop="price_change" label="涨跌额" width="auto" align="center" min-width="100px">
            </el-table-column>
            <el-table-column prop="turnover" label="成交额" width="auto" align="center" min-width="100px">
            </el-table-column>
            <el-table-column prop="volume" label="成交量" width="auto" align="center" min-width="100px">
            </el-table-column>
            <el-table-column v-for="col in visibleColumns" :key="col.prop" :prop="col.prop" :label="col.label"
                align="center" :min-width="col.width">
            </el-table-column>

            <el-table-column label="操作" width="150" align="center" fixed="right">
                <template slot-scope="scope">
                    <el-button @click="tableEditing(scope.row)" class="green-button" icon="el-icon-edit" type="info" plain
                        size="mini"></el-button>
                    <el-button @click="del_data(scope.row.id)" class="red-button" type="info" plain size="mini"
                        v-if="scope.row.name !== 'admin'" icon="el-icon-delete"></el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="fenye11">
            <div style="display: flex;align-items: center;">{{ `当前第 ${currentPage} 页，每页 ${pagesize} 条记录` }}</div>
            <el-pagination background layout="prev, pager, next,total" :total="total" :page-size="pagesize"
                @current-change="current_change"></el-pagination>
        </div>
        <!-- 弹窗 -->
        <el-dialog v-dialog-drag :close-on-click-modal="false" title="新增" top="35px" :visible.sync="dialogVisibleAdd"
            :before-close="beforeClose">
            <el-form :model="formAdd" :rules="rulesAdd" ref="formAdd" class="demo-formAdd">
                <el-form-item label="分类ID" prop="category_id">
                    <el-input size="mini" type="number" v-model="formAdd.category_id"></el-input>
                </el-form-item>
                <el-form-item label="股票名称" prop="name">
                    <el-input size="mini" v-model="formAdd.name"></el-input>
                </el-form-item>
                <el-form-item label="股票代码" prop="symbol">
                    <el-input size="mini" v-model="formAdd.symbol"></el-input>
                </el-form-item>
                <el-form-item label="股票数字代码" prop="numeric_symbol">
                    <el-input size="mini" v-model="formAdd.numeric_symbol"></el-input>
                </el-form-item>
                <el-form-item label="当前价格" prop="price">
                    <el-input size="mini" v-model="formAdd.price"></el-input>
                </el-form-item>
                <el-form-item label="今开" prop="open_price">
                    <el-input size="mini" v-model="formAdd.open_price"></el-input>
                </el-form-item>
                <el-form-item label="昨收" prop="close_price">
                    <el-input size="mini" v-model="formAdd.close_price"></el-input>
                </el-form-item>
                <el-form-item label="最高" prop="high_price">
                    <el-input size="mini" v-model="formAdd.high_price"></el-input>
                </el-form-item>
                <el-form-item label="最低" prop="low_price">
                    <el-input size="mini" v-model="formAdd.low_price"></el-input>
                </el-form-item>
                <el-form-item label="成交额" prop="turnover">
                    <el-input size="mini" v-model="formAdd.turnover"></el-input>
                </el-form-item>
                <el-form-item label="权重" prop="weight">
                    <el-input size="mini" v-model="formAdd.weight"></el-input>
                </el-form-item>
                <el-form-item label="Beta系数">
                    <el-input size="mini" v-model="formAdd.beta"></el-input>
                </el-form-item>
                <el-form-item label="所属国家ID">
                    <el-input size="mini" v-model="formAdd.country_id"></el-input>
                </el-form-item>
                <el-form-item label="折扣信息">
                    <el-input size="mini" v-model="formAdd.discount"></el-input>
                </el-form-item>
                <el-form-item label="是否显示">
                    <el-input size="mini" v-model="formAdd.display_status"></el-input>
                </el-form-item>
                <el-form-item label="是否有股息">
                    <el-input size="mini" v-model="formAdd.dividend_status"></el-input>
                </el-form-item>
                <el-form-item label="股息价格">
                    <el-input size="mini" v-model="formAdd.dividend_price"></el-input>
                </el-form-item>
                <el-form-item label="每股收益">
                    <el-input size="mini" v-model="formAdd.eps"></el-input>
                </el-form-item>
                <el-form-item label="交易所">
                    <el-input size="mini" v-model="formAdd.exchange"></el-input>
                </el-form-item>
                <el-form-item label="是否推荐">
                    <el-input size="mini" v-model="formAdd.is_recommended"></el-input>
                </el-form-item>
                <el-form-item label="LOGO">
                    <el-input size="mini" v-model="formAdd.logo"></el-input>
                </el-form-item>
                <el-form-item label="市值">
                    <el-input size="mini" v-model="formAdd.market_cap"></el-input>
                </el-form-item>
                <el-form-item label="市盈率">
                    <el-input size="mini" v-model="formAdd.pe_ratio"></el-input>
                </el-form-item>
                <el-form-item label="涨跌额">
                    <el-input size="mini" v-model="formAdd.price_change"></el-input>
                </el-form-item>
                <el-form-item label="涨跌百分比">
                    <el-input size="mini" v-model="formAdd.price_change_pct"></el-input>
                </el-form-item>
                <el-form-item label="换手率区间">
                    <el-input size="mini" v-model="formAdd.turnover_section"></el-input>
                </el-form-item>
                <el-form-item label="成交量">
                    <el-input size="mini" v-model="formAdd.volume"></el-input>
                </el-form-item>
            </el-form>
            <template slot="footer">
                <div class="fbtns">
                    <el-button class="purple-button" size="mini" @click="add_data" :loading="btnAdd" plain>确认新增</el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-dialog-drag :close-on-click-modal="false" top="35px" title="更新" :visible.sync="dialogVisibleEdit"
            v-loading="dialogVisibleEditLoading" :before-close="beforeClose">
            <el-form :model="formEdit" :rules="rulesEdit" ref="formEdit" class="demo-formEdit">

                <el-form-item label="分类ID" prop="category_id">
                    <el-input size="mini" type="number" v-model="formEdit.category_id"></el-input>
                </el-form-item>
                <el-form-item label="股票名称" prop="name">
                    <el-input size="mini" v-model="formEdit.name"></el-input>
                </el-form-item>
                <el-form-item label="股票代码" prop="symbol">
                    <el-input size="mini" v-model="formEdit.symbol"></el-input>
                </el-form-item>
                <el-form-item label="股票数字代码" prop="numeric_symbol">
                    <el-input size="mini" v-model="formEdit.numeric_symbol"></el-input>
                </el-form-item>
                <el-form-item label="当前价格" prop="price">
                    <el-input size="mini" v-model="formEdit.price"></el-input>
                </el-form-item>
                <el-form-item label="今开" prop="open_price">
                    <el-input size="mini" v-model="formEdit.open_price"></el-input>
                </el-form-item>
                <el-form-item label="昨收" prop="close_price">
                    <el-input size="mini" v-model="formEdit.close_price"></el-input>
                </el-form-item>
                <el-form-item label="最高" prop="high_price">
                    <el-input size="mini" v-model="formEdit.high_price"></el-input>
                </el-form-item>
                <el-form-item label="最低" prop="low_price">
                    <el-input size="mini" v-model="formEdit.low_price"></el-input>
                </el-form-item>
                <el-form-item label="成交额" prop="turnover">
                    <el-input size="mini" v-model="formEdit.turnover"></el-input>
                </el-form-item>
                <el-form-item label="权重" prop="weight">
                    <el-input size="mini" v-model="formEdit.weight"></el-input>
                </el-form-item>
                <el-form-item label="Beta系数">
                    <el-input size="mini" v-model="formEdit.beta"></el-input>
                </el-form-item>
                <el-form-item label="所属国家ID">
                    <el-input size="mini" v-model="formEdit.country_id"></el-input>
                </el-form-item>
                <el-form-item label="折扣信息">
                    <el-input size="mini" v-model="formEdit.discount"></el-input>
                </el-form-item>
                <el-form-item label="是否显示">
                    <el-input size="mini" v-model="formEdit.display_status"></el-input>
                </el-form-item>
                <el-form-item label="是否有股息">
                    <el-input size="mini" v-model="formEdit.dividend_status"></el-input>
                </el-form-item>
                <el-form-item label="股息价格">
                    <el-input size="mini" v-model="formEdit.dividend_price"></el-input>
                </el-form-item>
                <el-form-item label="每股收益">
                    <el-input size="mini" v-model="formEdit.eps"></el-input>
                </el-form-item>
                <el-form-item label="交易所">
                    <el-input size="mini" v-model="formEdit.exchange"></el-input>
                </el-form-item>
                <el-form-item label="是否推荐">
                    <el-input size="mini" v-model="formEdit.is_recommended"></el-input>
                </el-form-item>
                <el-form-item label="LOGO">
                    <el-input size="mini" v-model="formEdit.logo"></el-input>
                </el-form-item>
                <el-form-item label="市值">
                    <el-input size="mini" v-model="formEdit.market_cap"></el-input>
                </el-form-item>
                <el-form-item label="市盈率">
                    <el-input size="mini" v-model="formEdit.pe_ratio"></el-input>
                </el-form-item>
                <el-form-item label="涨跌额">
                    <el-input size="mini" v-model="formEdit.price_change"></el-input>
                </el-form-item>
                <el-form-item label="涨跌百分比">
                    <el-input size="mini" v-model="formEdit.price_change_pct"></el-input>
                </el-form-item>
                <el-form-item label="换手率区间">
                    <el-input size="mini" v-model="formEdit.turnover_section"></el-input>
                </el-form-item>
                <el-form-item label="成交量">
                    <el-input size="mini" v-model="formEdit.volume"></el-input>
                </el-form-item>

            </el-form>
            <template slot="footer">
                <div class="fbtns">
                    <el-button class="black-button" size="mini" plain @click="upd_data" :loading="btnEdit">确认修改</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
  
<script>
import {
    stock_list,
    stock_addition,
    stock_editor,
    stock_deletion,
} from "@/utils/api";
export default {
    name: "stock",

    data() {
        return {
            table_loading: true,
            touristsspeak: [
                {
                    value: 1,
                    label: "是",
                },
                {
                    value: 0,
                    label: "否",
                },
            ],
            dialogVisibleEditLoading: false,
            dialogVisibleEdit: false,
            btnAdd: false,
            btnEdit: false,
            formshow: false,
            exportFormat: '',
            // 下拉框选中的列（存储 prop 值）
            selectedColumns: ['name'], // 默认选中姓名和日期

            // 所有可选的列配置
            allColumns: [
                { prop: 'discount', label: '折扣信息', width: 140 },
                { prop: 'eps', label: '每股收益', width: 140 },
                { prop: 'exchange', label: '交易所', width: 140 },
                { prop: 'pe_ratio', label: '市盈率', width: 140 },
                { prop: 'price_change_pct', label: '涨跌百分比', width: 140 },
                { prop: 'numeric_symbol', label: '股票数字代码', width: 140 },
                { prop: 'dividend_price', label: '股息价格', width: 140 },
                { prop: 'turnover_section', label: '换手率区间', width: 140 },
            ],
            pagesize: 10,
            total: 0,
            options: [
                {
                    value: 1,
                    label: "是",
                },
                {
                    value: 0,
                    label: "否",
                },
            ],
            defaultProps: {
                children: "childs",
                label: "name",
            },
            menuProps: {
                children: "children",
                label: "label",
            },
            formAdd: {
                beta: '',
                category_id: '',
                category_name: '',
                close_price: '',
                country_id: '',
                discount: '',
                display_status: '',
                dividend_price: '',
                dividend_status: '',
                eps: '',
                exchange: '',
                high_price: '',
                is_recommended: '',
                logo: '',
                low_price: '',
                market_cap: '',
                name: '',
                numeric_symbol: '',
                open_price: '',
                pe_ratio: '',
                price: '',
                price_change: '',
                price_change_pct: '',
                symbol: '',
                turnover: '',
                turnover_section: '',
                volume: '',

            },
            formEdit: {
                id: '',
                beta: '',
                category_id: '',
                category_name: '',
                close_price: '',
                country_id: '',
                discount: '',
                display_status: '',
                dividend_price: '',
                dividend_status: '',
                eps: '',
                exchange: '',
                high_price: '',
                is_recommended: '',
                logo: '',
                low_price: '',
                market_cap: '',
                name: '',
                numeric_symbol: '',
                open_price: '',
                pe_ratio: '',
                price: '',
                price_change: '',
                price_change_pct: '',
                symbol: '',
                turnover: '',
                turnover_section: '',
                volume: '',
            },
            form: {
                username: "",
            },
            tableData: [
                { id: 1, date: '2023-01-01', group_name: '张三', status: '北京', permissions: '13800138000', name: 'name' },
                { id: 2, date: '2023-01-02', group_name: '李四', status: '上海', permissions: '13900139000', name: 'name' },
            ],
            dialogVisibleAdd: false,
            titles: "",
            name: "",
            nametype: "编辑",
            expandedKeys: [], // 控制哪些行默认展开
            menuData: [], //菜单列表
            userRoleList: [], //角色列表
            articlmenu: [], //文章列表
            draftsmenu: [], //草稿箱列表
            currentNodeData: [],
            currentDraftsKey: [],
            currentPage: 1,
            rulesEdit: {
                beta: [
                    { required: true, message: "请输入Beta系数", trigger: "blur" },
                ],
                category_id: [
                    { required: true, message: "请输入行业分类ID", trigger: "blur" },
                ],
                category_name: [
                    { required: true, message: "请输入行业分类名称", trigger: "blur" },
                ],
                close_price: [
                    { required: true, message: "请输入收盘价", trigger: "blur" },
                ],
                country_id: [
                    { required: true, message: "请输入国家ID", trigger: "blur" },
                ],
                discount: [
                    { required: true, message: "请输入折扣", trigger: "blur" },
                ],
                display_status: [
                    { required: true, message: "请输入显示状态", trigger: "blur" },
                ],
                dividend_price: [
                    { required: true, message: "请输入分红金额", trigger: "blur" },
                ],
                dividend_status: [
                    { required: true, message: "请输入分红状态", trigger: "blur" },
                ],
                eps: [
                    { required: true, message: "请输入每股收益EPS", trigger: "blur" },
                ],
                exchange: [
                    { required: true, message: "请输入交易所", trigger: "blur" },
                ],
                high_price: [
                    { required: true, message: "请输入最高价", trigger: "blur" },
                ],
                is_recommended: [
                    { required: true, message: "请输入是否推荐", trigger: "blur" },
                ],
                logo: [
                    { required: true, message: "请输入Logo地址", trigger: "blur" },
                ],
                low_price: [
                    { required: true, message: "请输入最低价", trigger: "blur" },
                ],
                market_cap: [
                    { required: true, message: "请输入市值", trigger: "blur" },
                ],
                name: [
                    { required: true, message: "请输入名称", trigger: "blur" },
                ],
                numeric_symbol: [
                    { required: true, message: "请输入数字代码", trigger: "blur" },
                ],
                open_price: [
                    { required: true, message: "请输入开盘价", trigger: "blur" },
                ],
                pe_ratio: [
                    { required: true, message: "请输入市盈率", trigger: "blur" },
                ],
                price: [
                    { required: true, message: "请输入当前价格", trigger: "blur" },
                ],
                price_change: [
                    { required: true, message: "请输入涨跌额", trigger: "blur" },
                ],
                price_change_pct: [
                    { required: true, message: "请输入涨跌幅", trigger: "blur" },
                ],
                symbol: [
                    { required: true, message: "请输入股票代码", trigger: "blur" },
                ],
                turnover: [
                    { required: true, message: "请输入成交额", trigger: "blur" },
                ],
                turnover_section: [
                    { required: true, message: "请输入成交区间", trigger: "blur" },
                ],
                volume: [
                    { required: true, message: "请输入成交量", trigger: "blur" },
                ]


            },
            rulesAdd: {
                beta: [
                    { required: true, message: "请输入Beta系数", trigger: "blur" },
                ],
                category_id: [
                    { required: true, message: "请输入行业分类ID", trigger: "blur" },
                ],
                category_name: [
                    { required: true, message: "请输入行业分类名称", trigger: "blur" },
                ],
                close_price: [
                    { required: true, message: "请输入收盘价", trigger: "blur" },
                ],
                country_id: [
                    { required: true, message: "请输入国家ID", trigger: "blur" },
                ],
                discount: [
                    { required: true, message: "请输入折扣", trigger: "blur" },
                ],
                display_status: [
                    { required: true, message: "请输入显示状态", trigger: "blur" },
                ],
                dividend_price: [
                    { required: true, message: "请输入分红金额", trigger: "blur" },
                ],
                dividend_status: [
                    { required: true, message: "请输入分红状态", trigger: "blur" },
                ],
                eps: [
                    { required: true, message: "请输入每股收益EPS", trigger: "blur" },
                ],
                exchange: [
                    { required: true, message: "请输入交易所", trigger: "blur" },
                ],
                high_price: [
                    { required: true, message: "请输入最高价", trigger: "blur" },
                ],
                is_recommended: [
                    { required: true, message: "请输入是否推荐", trigger: "blur" },
                ],
                logo: [
                    { required: true, message: "请输入Logo地址", trigger: "blur" },
                ],
                low_price: [
                    { required: true, message: "请输入最低价", trigger: "blur" },
                ],
                market_cap: [
                    { required: true, message: "请输入市值", trigger: "blur" },
                ],
                name: [
                    { required: true, message: "请输入名称", trigger: "blur" },
                ],
                numeric_symbol: [
                    { required: true, message: "请输入数字代码", trigger: "blur" },
                ],
                open_price: [
                    { required: true, message: "请输入开盘价", trigger: "blur" },
                ],
                pe_ratio: [
                    { required: true, message: "请输入市盈率", trigger: "blur" },
                ],
                price: [
                    { required: true, message: "请输入当前价格", trigger: "blur" },
                ],
                price_change: [
                    { required: true, message: "请输入涨跌额", trigger: "blur" },
                ],
                price_change_pct: [
                    { required: true, message: "请输入涨跌幅", trigger: "blur" },
                ],
                symbol: [
                    { required: true, message: "请输入股票代码", trigger: "blur" },
                ],
                turnover: [
                    { required: true, message: "请输入成交额", trigger: "blur" },
                ],
                turnover_section: [
                    { required: true, message: "请输入成交区间", trigger: "blur" },
                ],
                volume: [
                    { required: true, message: "请输入成交量", trigger: "blur" },
                ]
            },
        };
    },
    computed: {
        userRoleId() {
            const user = JSON.parse(localStorage.getItem("user"));
            return user ? user.role_id : null;
        },
        // 计算实际要显示的列
        visibleColumns() {
            return this.allColumns.filter(col =>
                this.selectedColumns.includes(col.prop)
            )
        }
    },
    watch: {
        // 当选择的列变化时，可以在这里添加额外逻辑
        selectedColumns(newVal) {
            console.log('当前显示的列：', newVal)
        },
    },
    mounted() {
        this.get_data();
    },

    methods: {
        setCheckedKeys(permissionIds) {
            console.log(permissionIds);
            if (!permissionIds) return;

            // 将字符串转换为数字数组
            const idsArray = permissionIds.split(',')
                .map(id => parseInt(id.trim()))
                .filter(id => !isNaN(id));

            if (idsArray.length > 0) {
                this.$refs.permissionTreeEdit.setCheckedKeys(idsArray);
            }
        },
        showform() {
            this.formshow = !this.formshow
        },
        get_time() {
            const now = new Date();
            const formatted = now.getFullYear() + '-' +
                String(now.getMonth() + 1).padStart(2, '0') + '-' +
                String(now.getDate()).padStart(2, '0') + ' ' +
                String(now.getHours()).padStart(2, '0') + ':' +
                String(now.getMinutes()).padStart(2, '0') + ':' +
                String(now.getSeconds()).padStart(2, '0');
            return formatted
        },
        // 新增打开
        addbtn() {
            this.dialogVisibleAdd = true;
            this.titles = "新增";
        },
        // 查询
        async get_data(btn) {
            if (btn) this.currentPage = 1
            this.table_loading = true; // 开始加载

            let params = new URLSearchParams();

            params.append('page', this.currentPage);
            params.append('page_size', this.pagesize);

            if (this.form.username) params.append('username', this.form.username);

            let data = `?${params.toString()}`;

            try {
                const res = await stock_list(data);
                if (res.data && res.data.code == "200") {


                    this.tableData = res.data.data.data;
                    this.total = res.data.data.total_records;
                } else {
                    this.$message.error(res?.data?.msg || "获取数据失败");
                }
            } catch (err) {
                console.error("获取数据失败:", err);
                this.$message.error("请求出错，请稍后再试");
            } finally {
                this.table_loading = false; // 不论成功失败都结束 table_loading
            }
        },
        // 新增
        async add_data() {

            this.btnAdd = true;
            try {
                const valid = await this.$refs.formAdd.validate();
                if (!valid) {
                    this.$message.warning("表单验证未通过");
                    return;
                }

                const fields = [
                    'beta',
                    'category_id',
                    'category_name',
                    'close_price',
                    'country_id',
                    'discount',
                    'display_status',
                    'dividend_price',
                    'dividend_status',
                    'eps',
                    'exchange',
                    'high_price',
                    'is_recommended',
                    'logo',
                    'low_price',
                    'market_cap',
                    'name',
                    'numeric_symbol',
                    'open_price',
                    'pe_ratio',
                    'price',
                    'price_change',
                    'price_change_pct',
                    'symbol',
                    'turnover',
                    'turnover_section',
                    'volume'
                ];




                let data = {};

                for (const key of fields) {
                    const value = this.formAdd[key];
                    if (value !== '' && value !== null && value !== undefined) {
                        data[key] = value;
                    }
                }

                const res = await stock_addition(data);
                console.log(res, '新增');
                if (res && res.status == "200" && res.data.code == "200") {
                    // this.$message.success(res.data.message);

                    this.$notify({
                        title: `${res.data.message}`,
                        message: `ID:${res.data.data.id}`,
                        type: 'success',
                        duration: 8000,
                        position: 'bottom-right'
                    });
                    this.get_data();
                    this.dialogVisibleAdd = false;
                } else {
                    this.$message.error(res?.data?.message || "操作失败");
                }
            } catch (err) {
                console.error(err);
                this.$message.error("请求失败，请稍后再试");
            } finally {
                this.btnAdd = false;
            }
        },
        // 更新
        async upd_data() {
            this.btnEdit = true;
            try {
                const valid = await this.$refs.formEdit.validate();
                if (!valid) {
                    this.$message.warning("表单验证未通过");
                    return;
                }

                const fields = [
                    'id',
                    'beta',
                    'category_id',
                    'category_name',
                    'close_price',
                    'country_id',
                    'discount',
                    'display_status',
                    'dividend_price',
                    'dividend_status',
                    'eps',
                    'exchange',
                    'high_price',
                    'is_recommended',
                    'logo',
                    'low_price',
                    'market_cap',
                    'name',
                    'numeric_symbol',
                    'open_price',
                    'pe_ratio',
                    'price',
                    'price_change',
                    'price_change_pct',
                    'symbol',
                    'turnover',
                    'turnover_section',
                    'volume'
                ];


                const data = {};
                for (const key of fields) {
                    const value = this.formEdit[key];
                    if (value !== '' && value !== null && value !== undefined) {
                        data[key] = value;
                    }
                }

                const response = await stock_editor(data);

                if (response.data && response.data.code == "200") {
                    this.$message.success(response.data.msg);
                    this.dialogVisibleEdit = false;
                    this.get_data();
                } else {
                    this.$message.warning(response?.data?.msg || "操作失败");
                }
            } catch (err) {
                console.error("更新失败:", err);
                this.$message.error("请求出错，请稍后再试");
            } finally {
                this.btnEdit = false;
            }
        },
        // 删除
        async del_data(id) {
            try {
                await this.$confirm("是否继续执行操作？", "提示", {
                    confirmButtonText: "是",
                    cancelButtonText: "否",
                    type: "warning",
                });

                const res = await stock_deletion(id).catch((err) => {
                    return console.error(err);
                });

                if (res && res.status == "200" && res.data.code == "200") {
                    this.$message.success(res.data.msg);
                    this.dialogVisibleAdd = false;
                    this.get_data();
                } else {
                    this.$message.error(res.data.msg);
                }
            } catch (error) {
                // 用户点击取消或关闭对话框
                console.error(error);
            }
        },

        // 关闭弹窗
        beforeClose() {
            this.dialogVisibleEdit = false
            this.dialogVisibleAdd = false

            this.formAdd = {
                beta: '',
                category_id: '',
                category_name: '',
                close_price: '',
                country_id: '',
                discount: '',
                display_status: '',
                dividend_price: '',
                dividend_status: '',
                eps: '',
                exchange: '',
                high_price: '',
                is_recommended: '',
                logo: '',
                low_price: '',
                market_cap: '',
                name: '',
                numeric_symbol: '',
                open_price: '',
                pe_ratio: '',
                price: '',
                price_change: '',
                price_change_pct: '',
                symbol: '',
                turnover: '',
                turnover_section: '',
                volume: '',

            }
            this.formEdit = {
                id: '',
                beta: '',
                category_id: '',
                category_name: '',
                close_price: '',
                country_id: '',
                discount: '',
                display_status: '',
                dividend_price: '',
                dividend_status: '',
                eps: '',
                exchange: '',
                high_price: '',
                is_recommended: '',
                logo: '',
                low_price: '',
                market_cap: '',
                name: '',
                numeric_symbol: '',
                open_price: '',
                pe_ratio: '',
                price: '',
                price_change: '',
                price_change_pct: '',
                symbol: '',
                turnover: '',
                turnover_section: '',
                volume: '',

            }
        },

        // 分页
        current_change(currentPage) {
            this.currentPage = currentPage;
            this.get_data();
        },
        // 重置
        resetForm() {
            this.form = {
                username: ""
            };
            this.currentPage = 1;
            this.get_data();
        },
        // 编辑打开
        tableEditing(row) {
            this.titles = "编辑";
            this.dialogVisibleEdit = true;

            this.formEdit.id = row.id;

            this.formEdit.beta = row.beta || '';
            this.formEdit.category_id = row.category_id || '';
            this.formEdit.category_name = row.category_name || '';
            this.formEdit.close_price = row.close_price || '';
            this.formEdit.country_id = row.country_id || '';
            this.formEdit.discount = row.discount || '';
            this.formEdit.display_status = row.display_status || '';
            this.formEdit.dividend_price = row.dividend_price || '';
            this.formEdit.dividend_status = row.dividend_status || '';
            this.formEdit.eps = row.eps || '';
            this.formEdit.exchange = row.exchange || '';
            this.formEdit.high_price = row.high_price || '';
            this.formEdit.is_recommended = row.is_recommended || '';
            this.formEdit.logo = row.logo || '';
            this.formEdit.low_price = row.low_price || '';
            this.formEdit.market_cap = row.market_cap || '';
            this.formEdit.name = row.name || '';
            this.formEdit.numeric_symbol = row.numeric_symbol || '';
            this.formEdit.open_price = row.open_price || '';
            this.formEdit.pe_ratio = row.pe_ratio || '';
            this.formEdit.price = row.price || '';
            this.formEdit.price_change = row.price_change || '';
            this.formEdit.price_change_pct = row.price_change_pct || '';
            this.formEdit.symbol = row.symbol || '';
            this.formEdit.turnover = row.turnover || '';
            this.formEdit.turnover_section = row.turnover_section || '';
            this.formEdit.volume = row.volume || '';



        },
        exportTable(format) {
            switch (format) {
                case 'json':
                    this.exportJSON();
                    break;
                case 'xml':
                    this.exportXML();
                    break;
                case 'csv':
                    this.exportCSV();
                    break;
                case 'txt':
                    this.exportTXT();
                    break;
                case 'word':
                    this.exportWord();
                    break;
                case 'excel':
                    this.exportExcel();
                    break;
            }
        },
        exportJSON() {
            const jsonStr = JSON.stringify(this.tableData, null, 2);
            const blob = new Blob([jsonStr], { type: 'application/json' });
            this.downloadBlob(blob, 'table.json');
        },
        exportXML() {
            const xml = `<?xml version="1.0"?>\n<rows>\n` +
                this.tableData.map(item =>
                    `  <row>\n` +
                    `    <beta>${item.beta || ''}</beta>\n` +
                    `    <category_id>${item.category_id || ''}</category_id>\n` +
                    `    <category_name>${item.category_name || ''}</category_name>\n` +
                    `    <close_price>${item.close_price || ''}</close_price>\n` +
                    `    <country_id>${item.country_id || ''}</country_id>\n` +
                    `    <discount>${item.discount || ''}</discount>\n` +
                    `    <display_status>${item.display_status || ''}</display_status>\n` +
                    `    <dividend_price>${item.dividend_price || ''}</dividend_price>\n` +
                    `    <dividend_status>${item.dividend_status || ''}</dividend_status>\n` +
                    `    <eps>${item.eps || ''}</eps>\n` +
                    `    <exchange>${item.exchange || ''}</exchange>\n` +
                    `    <high_price>${item.high_price || ''}</high_price>\n` +
                    `    <is_recommended>${item.is_recommended || ''}</is_recommended>\n` +
                    `    <logo>${item.logo || ''}</logo>\n` +
                    `    <low_price>${item.low_price || ''}</low_price>\n` +
                    `    <market_cap>${item.market_cap || ''}</market_cap>\n` +
                    `    <name>${item.name || ''}</name>\n` +
                    `    <numeric_symbol>${item.numeric_symbol || ''}</numeric_symbol>\n` +
                    `    <open_price>${item.open_price || ''}</open_price>\n` +
                    `    <pe_ratio>${item.pe_ratio || ''}</pe_ratio>\n` +
                    `    <price>${item.price || ''}</price>\n` +
                    `    <price_change>${item.price_change || ''}</price_change>\n` +
                    `    <price_change_pct>${item.price_change_pct || ''}</price_change_pct>\n` +
                    `    <symbol>${item.symbol || ''}</symbol>\n` +
                    `    <turnover>${item.turnover || ''}</turnover>\n` +
                    `    <turnover_section>${item.turnover_section || ''}</turnover_section>\n` +
                    `    <volume>${item.volume || ''}</volume>\n` +
                    `  </row>`).join('\n') +
                `\n</rows>`;
            const blob = new Blob([xml], { type: 'application/xml' });
            this.downloadBlob(blob, 'table.xml');
        },
        exportCSV() {
            const headers = [
                'Beta', '行业分类ID', '行业分类名称', '收盘价', '国家ID', '折扣', '是否显示',
                '分红金额', '分红状态', '每股收益EPS', '交易所', '最高价', '是否推荐', 'Logo',
                '最低价', '市值', '名称', '数字代码', '开盘价', '市盈率', '现价',
                '涨跌额', '涨跌幅', '股票代码', '成交额', '成交区间', '成交量'
            ];
            const rows = this.tableData.map(item => [
                item.beta || '', item.category_id || '', item.category_name || '', item.close_price || '',
                item.country_id || '', item.discount || '', item.display_status || '', item.dividend_price || '',
                item.dividend_status || '', item.eps || '', item.exchange || '', item.high_price || '',
                item.is_recommended || '', item.logo || '', item.low_price || '', item.market_cap || '',
                item.name || '', item.numeric_symbol || '', item.open_price || '', item.pe_ratio || '',
                item.price || '', item.price_change || '', item.price_change_pct || '', item.symbol || '',
                item.turnover || '', item.turnover_section || '', item.volume || ''
            ]);
            let content = headers.join(',') + '\n';
            rows.forEach(row => {
                content += row.join(',') + '\n';
            });
            const blob = new Blob([content], { type: 'text/csv;charset=utf-8;' });
            this.downloadBlob(blob, 'table.csv');
        },
        exportTXT() {
            const headers = [
                'Beta', '行业分类ID', '行业分类名称', '收盘价', '国家ID', '折扣', '是否显示',
                '分红金额', '分红状态', '每股收益EPS', '交易所', '最高价', '是否推荐', 'Logo',
                '最低价', '市值', '名称', '数字代码', '开盘价', '市盈率', '现价',
                '涨跌额', '涨跌幅', '股票代码', '成交额', '成交区间', '成交量'
            ];
            const rows = this.tableData.map(item => [
                item.beta || '', item.category_id || '', item.category_name || '', item.close_price || '',
                item.country_id || '', item.discount || '', item.display_status || '', item.dividend_price || '',
                item.dividend_status || '', item.eps || '', item.exchange || '', item.high_price || '',
                item.is_recommended || '', item.logo || '', item.low_price || '', item.market_cap || '',
                item.name || '', item.numeric_symbol || '', item.open_price || '', item.pe_ratio || '',
                item.price || '', item.price_change || '', item.price_change_pct || '', item.symbol || '',
                item.turnover || '', item.turnover_section || '', item.volume || ''
            ]);
            let content = headers.join('\t') + '\n';
            rows.forEach(row => {
                content += row.join('\t') + '\n';
            });
            const blob = new Blob([content], { type: 'text/plain;charset=utf-8;' });
            this.downloadBlob(blob, 'table.txt');
        },
        async exportWord() {
            const { default: HTMLDocx } = await import('html-docx-js/dist/html-docx');
            const headers = [
                'Beta', '行业分类ID', '行业分类名称', '收盘价', '国家ID', '折扣', '是否显示',
                '分红金额', '分红状态', '每股收益EPS', '交易所', '最高价', '是否推荐', 'Logo',
                '最低价', '市值', '名称', '数字代码', '开盘价', '市盈率', '现价',
                '涨跌额', '涨跌幅', '股票代码', '成交额', '成交区间', '成交量'
            ];
            const fields = [
                'beta', 'category_id', 'category_name', 'close_price', 'country_id', 'discount', 'display_status',
                'dividend_price', 'dividend_status', 'eps', 'exchange', 'high_price', 'is_recommended', 'logo',
                'low_price', 'market_cap', 'name', 'numeric_symbol', 'open_price', 'pe_ratio', 'price',
                'price_change', 'price_change_pct', 'symbol', 'turnover', 'turnover_section', 'volume'
            ];
            const html =
                `<table border="1" cellpadding="5" cellspacing="0"><tr>${headers.map(h => `<th>${h}</th>`).join('')}</tr>` +
                this.tableData.map(item =>
                    `<tr>${fields.map(f => `<td>${item[f] || ''}</td>`).join('')}</tr>`
                ).join('') +
                `</table>`;
            const blob = HTMLDocx.asBlob(html);
            this.downloadBlob(blob, 'table.docx');
        },
        async exportExcel() {
            const XLSX = await import('xlsx');
            const ws = XLSX.utils.json_to_sheet(this.tableData);
            const wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
            const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
            const blob = new Blob([wbout], { type: 'application/octet-stream' });
            this.downloadBlob(blob, 'table.xlsx');
        },
        downloadBlob(blob, filename) {
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = filename;
            link.click();
            URL.revokeObjectURL(link.href);
        }
    },
};
</script>
<style>
.rowlist {
    padding: 6px !important;
}

.nbysm {
    flex: 2;
    text-align: right;
    line-height: 40px;
    font-weight: 700;
    font-size: 15px;
}

.souSuoYouCe {
    margin: 20px 0 0 auto;
    padding-bottom: 5px;
    padding-right: 10px;
}

.cell {
    font-size: 13px;
    white-space: nowrap !important;
}

.demo-table-expand {
    font-size: 0;
    margin-left: 10px;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
</style>
<style lang="less" scoped>
.namename {
    padding: 0 10px;
    text-align: right;
    line-height: 40px;
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
}

.el-textarea {
    overflow: hidden;
    /* 隐藏滚动条 */
}

.pageListBox {
    width: 100%;
    // padding: 10px;
    // background-color: aquamarine;
    height: auto;
    // border: 1px #000 solid;

    .cardAdmin {
        position: relative;
        // height: 18%;
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin: 0;

        // border: #fafafa solid 1px;
        padding: 0 5px;
        margin-bottom: 2px;

        .formNewAdmin {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            padding: 0;
            align-self: baseline;
            padding-bottom: 10px;
            border-bottom: 1px #e3e3e3 solid;
        }

        .formSearch {
            width: 25%;
            min-width: 25%;
            margin-top: 20px;
            height: 30px;
            display: flex;
            justify-content: center;
        }
    }

    .btnBoxList {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;

        .formbtns {
            width: 50%;
            display: flex;
            justify-content: end;
            padding: 5px 10px;

            .qweqweasdasd {
                width: 75px;
                padding: 5px 10px;
                border: 1px #f4f4f4 solid;
            }

            .qweqweasdasd:hover {

                background-color: #e7e7e7;
                border: 1px #ccc solid;
            }


            .btnList22 {
                width: auto;
                height: 28px;
                color: #000;
                min-width: 50px;
                border-radius: 0px;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;

                i {
                    font-size: 18px;
                }
            }

        }

        .btns {
            width: 50%;
            display: flex;
            padding: 5px 10px;



        }


    }

    .pop-up-form {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding: 0;
        align-self: baseline;
        margin: 10px 0;
        justify-content: center;
        padding-right: 15px;

        .form-options {
            width: 100%;
            min-width: 100%;
            height: 40px;
            display: flex;
            justify-content: center;
            margin: 10px 0;
        }
    }
}
</style>
<style>
.cell {
    font-size: 13px;
    white-space: nowrap !important;
}

textarea {
    resize: none !important;
}

/* 子级样式 */
.child-row11 {
    background-color: #fcfcfc !important;
    color: #ff8718;
}

/* 父级样式 */
.parent-row11 {
    background-color: #ffffff;
    color: #000;
    font-weight: 500;
}

.parent-row11 .cell {
    font-size: 13px !important;
}

.el-dropdown-link {
    height: 100%;
    cursor: pointer;
    color: #000;
    font-weight: bold;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.fenye11 {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    padding: 4px 8px;
}



.el-pager li.active {
    background-color: #000 !important;
}

.setFomr {
    display: flex;
    align-items: center;
    padding: 10px 10px 0 10px;
}



.resetForm-button {
    background-color: #ffffff !important;
    border-color: #333 !important;
    color: #333 !important;
    font-size: 13px !important;
}

.resetForm-button:hover {
    background-color: #fff !important;
    border-color: #333 !important;
}
</style>
  